<template>
  <div class="vs-item sm:flex sm:flex-col">
    <h2 class="text-purple-1300 text-22 leading-7 font-semibold break-words w-full sm:flex-shrink-0">
      {{$t('vs_toolTraffic',{toolName: toolName})}}
    </h2>
    <p class="text-base text-gray-1500 leading-7 mt-4 w-full sm:flex-shrink-0"
      v-if="toolsTraffic && toolsTraffic.engagments">
      {{$t('vs_pros_and_cons_data',{toolName: toolName, monthlyVisitsData:$options.filters['vReset'](Number(toolData.month_visited_count)),avgVisitDurationData: $options.filters['formatTimeDuration'](Number(toolsTraffic.engagments.time_on_site)),perVisitData:Number(toolsTraffic.engagments.page_per_visit).toFixed(2),bounceRateData:`${Number(toolsTraffic.engagments.bounce_rate * 100).toFixed(2)}%`})}}
    </p>
    <div class="mt-7 w-full sm:flex-1"
      v-if="toolsTraffic && toolsTraffic.engagments">
      <h3 class="traffic-title text-xl">
        {{$t('vs_visitOverTime',{toolName: toolName})}}
      </h3>
      <div class="overflow-hidden border border-gray-2000 md:rounded-lg mt-7 vs-table">
        <table class="max-w-full w-full divide-y divide-gray-2000  table-fixed">
          <tbody class="bg-white">
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-1000 sm:pl-6 truncate"
                style="width: 40%;">{{$t('vs_monthlyVisit')}}</td>
              <td class="whitespace-nowrap px-3 py-4"
                style="width: 60%;">
                <span class="text-base font-semibold text-gray-1000 max-w-full">
                  {{toolData.month_visited_count | vReset}}
                </span>
              </td>
            </tr>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-1000 sm:pl-6 truncate">{{$t('vs_avgVisitDuration')}}</td>
              <td class="whitespace-nowrap px-3 py-4 truncate">
                <span class="text-base font-semibold text-purple-1300 hover:text-purple-1100">
                  {{toolsTraffic.engagments.time_on_site | formatTimeDuration}}
                </span>
              </td>
            </tr>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-1000 sm:pl-6 truncate">{{$t('vs_pagePerVisit')}}</td>
              <td class="whitespace-nowrap px-3 py-4 truncate">
                <span class="text-base font-semibold text-gray-1000 max-w-full">
                  {{Number(toolsTraffic.engagments.page_per_visit).toFixed(2)}}
                </span>
              </td>
            </tr>
            <tr>
              <td class="whitespace-nowrap py-4 pl-4 pr-3 text-base font-medium text-gray-1000 sm:pl-6 truncate">{{$t('vs_bounceRate')}}</td>
              <td class="whitespace-nowrap px-3 py-4 truncate">
                <span class="text-base font-semibold text-gray-1000 max-w-full">
                  {{ Number(toolsTraffic.engagments.bounce_rate * 100).toFixed(2) }}%
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="traffic-chart-box mt-10 w-full sm:flex-shrink-0"
      v-if="toolsTraffic && toolsTraffic.engagments">
      <div class="date"
        v-if="toolsTraffic.dataRange && toolsTraffic.dataRange.length===2">
        <svg-icon iconName="adschedule_default" />
        <span>{{toolsTraffic.dataRange[0]}} - {{toolsTraffic.dataRange[1]}}&nbsp;{{$t('list_allTraffic')}}</span>
      </div>
      <no-ssr>
        <line-chart :chartData="toolsTraffic.estimatedMonthlyVisitsList"
          :dId="`${toolData.handle}-lineChart`"></line-chart>
      </no-ssr>
    </div>
    <el-empty v-else
      class="sm:flex-1"
      :description="$t('vs_noData')"></el-empty>
  </div>
</template>

<script>
export default {
  name: 'CompareVsProsCons',
  props: {
    toolData: {
      type: Object | null,
      default() {
        return {}
      },
    },
    toolsTraffic: {
      type: Object | null,
      default() {
        return {}
      },
    },
  },
  computed: {
    toolName() {
      return this.$websiteName(this.toolData)
    },
  },
  filters: {
    vReset: function (val) {
      if (typeof val === 'number' && !isNaN(val)) {
        if (val <= 1000) {
          return val
        } else if (val > 1000 && val < 1000000) {
          return (val / 1000).toFixed(1) + 'K'
        } else if (val >= 1000000 && val < 1000000000) {
          return (val / 1000000).toFixed(1) + 'M'
        } else {
          return (val / 1000000000).toFixed(1) + 'B'
        }
      } else {
        return val
      }
    },
    formatTimeDuration: function (msTime) {
      //毫秒转换成时分秒展示
      let time = msTime
      let hour = Math.floor(time / 60 / 60)
      hour = hour.toString().padStart(2, '0')
      let minute = Math.floor(time / 60) % 60
      minute = minute.toString().padStart(2, '0')
      let second = Math.floor(time) % 60
      second = second.toString().padStart(2, '0')
      return `${hour}:${minute}:${second}`
    },
  },
}
</script>
<style lang='scss' scoped>
.gap-tab {
  gap: 50px !important;
}

.vs-table {
  tr {
    &:nth-child(even) {
      background: #f8f9fb;
    }
    td:last-child {
      border-left: 1px solid #e5e5e5;
    }
  }
}
.date {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  svg {
    font-size: 18px;
    margin-right: 8px;
    margin-top: -2px;
  }
  span {
    font-size: 16px;
    color: #191919;
    line-height: 20px;
  }
}

.traffic-title {
  position: relative;
  font-size: 20px;
  color: #191919;
  line-height: 24px;
  padding-left: 15px;
  &::after {
    position: absolute;
    content: '';
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: #8333c2;
    border-radius: 1px;
  }
}
</style>